<template>
	<view class="container">
		<view class="container-form">
			<!-- 族谱名称 -->
			<view class="form-item">
				<text class="label"><text style="color: red;">*</text>族谱名称</text>
				<input class="input" type="text" v-model="formData.genealogyName" placeholder="填写族谱名称" />
			</view>

			<!-- 家族姓氏 -->
			<view class="form-item">
				<text class="label"><text style="color: red;">*</text>家族姓氏</text>
				<input class="input" type="text" v-model="formData.surname" placeholder="填写家族姓氏" />
			</view>

			<!-- 联络人 -->
			<view class="form-item">
				<text class="label"><text style="color: red;">*</text>联络人</text>
				<input class="input" type="text" v-model="formData.contactPerson" placeholder="填写联络人" />
			</view>

			<!-- 根地区 -->
			<view class="form-item">
				<text class="label"><text style="color: red;">*</text>根地区</text>
				<input class="input" type="text" v-model="formData.rootRegion" placeholder="填写根地区" />
			</view>

			<!-- 家族介绍 -->
			<view class="form-item-textarea">
				<text class="label">家族介绍(最多500字)</text>
				<textarea class="textarea" v-model="formData.introduction" placeholder="填写家族介绍(家族起源/重大事件/家族荣誉/字辈信息等)"
					maxlength="500"></textarea>
			</view>

			<!-- 家训 -->
			<view class="form-item-textarea">
				<text class="label">家训(最多300字)</text>
				<textarea class="textarea" v-model="formData.familyTraining" placeholder="填写家训(家族精神传承)"
					maxlength="300"></textarea>
			</view>

			<!-- 家规 -->
			<view class="form-item-textarea">
				<text class="label">家规(最多300字)</text>
				<textarea class="textarea" v-model="formData.familyRules" placeholder="填写家规(家族行为规范约束)"
					maxlength="300"></textarea>
			</view>
		</view>

			<!-- 保存按钮 -->
			<view class="button-container">
				<button form-type="submit" class="save-button" @click="formSubmit">保 存</button>
			</view>
	</view>
</template>


<script>
	import {
		getGenealogy,
		addGenealogy,
		editGenealogy
	} from '@/api/record/genealogy.js'
	export default {
		data() {
			return {
				formData: {
					genealogyName: '',
					surname: '',
					contactPerson: '',
					rootRegion: '',
					regionIndex: 0,
					introduction: '',
					familyRules: '',
					familyTraining: ''
				},
				regions: ['地区1', '地区2', '地区3'] // 示例地区列表
			};
		},
		onLoad(event) {
			console.log(event.genealogyId)
			if (event.genealogyId == undefined) {
				return;
			}
			getGenealogy(event.genealogyId).then(response => {
				this.formData = response.data
				console.log(response)
			});
			console.log(event.genealogyId)
		},
		methods: {
			regionChange(e) {
				this.formData.regionIndex = e.detail.value;
				this.formData.region = this.regions[this.formData.regionIndex];
			},
			formSubmit(e) {
				console.log('表单数据：', this.formData);
				// 在这里处理表单提交逻辑
				if (this.formData.genealogyId == undefined) {
					addGenealogy(this.formData).then(response=>{
						
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
						
						uni.navigateBack({
							delta: 1
						});
					});
				} else {
					editGenealogy(this.formData).then(response => {
						// 提交成功后返回上一页并传递数据
						// const pages = getCurrentPages();
						// const prevPage = pages[pages.length - 2]; // 获取上一页

						// // 使用事件通道传递数据（推荐方式）
						// const eventChannel = this.getOpenerEventChannel();
						// if (eventChannel) {
						// 	eventChannel.emit('refreshData', {
						// 		data: this.formData
						// 	});
						// }
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});

						uni.navigateBack({
							delta: 1
						});
					});
				}
			}
		}
	};
</script>


<style scoped>
	.container {
		padding: 20px;
	}

	.container-form {
		padding: 20px;
		background-color: white;
	}

	.form-item {
		display: flex;
		margin-bottom: 20px;
	}

	.label {
		display: block;
		margin-bottom: 5px;
		font-size: 14px;
		color: #666;
		flex: 1;
	}

	.input {
		height: 35px;
		padding: 10px;
		/* border: 1px solid #ddd; */
		border-radius: 5px;
		font-size: 14px;
		flex: 2;
		text-align: right;
	}

	.textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.textarea {
		height: 100px;
	}

	.button-container {
		margin-top: 20px;
	}

	.save-button {
		width: 100%;
		padding: 1px 0;
		background-color: #037aff;
		color: #fff;
		border: none;
		border-radius: 25px;
		font-size: 16px;
	}
</style>